<template>
    <div class="chat-container">
      <div class="header">
        Railway Intelligent Assistant
      </div>
      
      <div class="messages" ref="messagesContainer">
        <div 
          v-for="message in messages" 
          :key="message.id" 
          class="message" 
          :class="message.isUser ? 'user-message' : 'bot-message'"
        >
          <div 
            class="message-bubble"
            :class="message.isUser ? 'user-bubble' : 'bot-bubble'"
          >
            {{ message.content }}
            <div class="timestamp">
              {{ formatTime(message.timestamp) }}
            </div>
          </div>
        </div>
      </div>
  
      <div class="input-area">
        <input
          type="text"
          v-model="inputText"
          @keyup.enter="sendMessage"
          class="input-field"
          placeholder="Type your message..."
        >
        <button @click="sendMessage" :disabled="inputAvailability" class="send-button">
          Send
        </button>
      </div>
    </div>
  </template>
  
  <script>

  import chat from '@/api/aiChat/chat'

  export default {
    data() {
      return {
        messages: [
          {
            id: 1,
            content: '你好我是你的业务助手！很高兴为你提供帮助。你可以让我帮你完成一些操作，比如查询即将到维修期限的设备或者发送维修通知邮件，注意发送邮件时记得告诉我具体设备名、类型、站区，多少天后进行维修和维修人员工号等信息。',
            isUser: false,
            timestamp: new Date()
          }
        ],
        inputText: '',
        messageId: 2,
        aiOuputText: '',
        inputAvailability: false
      }
    },
    methods: {
      sendMessage() {
        this.inputAvailability = true;
        if (!this.inputText.trim()) return
  
        // 添加用户消息
        this.messages.push({
          id: this.messageId++,
          content: this.inputText,
          isUser: true,
          timestamp: new Date()
        })

        chat.chatWithAi(this.inputText).then((result) => {
           this.aiOuputText = result;

        // 模拟AI回复
        setTimeout(() => {
          this.messages.push({
            id: this.messageId++,
            content: this.aiOuputText,
            isUser: false,
            timestamp: new Date()
          })
          this.scrollToBottom()
        }, 1000)

        }).catch((err) => {
            this.messages.push({
            id: this.messageId++,
            content:"您的帐户短时间请求已达到最大请求数：3，请在1秒后重试",
            isUser: false,
            timestamp: new Date()
          })
        });
  
        this.inputAvailability = false;
        this.inputText = ''
        this.scrollToBottom()
      },
      formatTime(date) {
        return date.toLocaleTimeString([], { 
          hour: '2-digit',
          minute: '2-digit'
        })
      },
      scrollToBottom() {
        this.$nextTick(() => {
          const container = this.$refs.messagesContainer
          container.scrollTop = container.scrollHeight
        })
      }
    }
  }
  </script>
  <!--    max-width: 800px; -->
  <style scoped>
  .chat-container {
    max-width: 800px;
    margin: 20px auto;
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    height: 79vh;
    display: flex;
    flex-direction: column;
  }
  
  .header {
    background: #2c3e50;
    color: white;
    padding: 15px;
    border-radius: 10px 10px 0 0;
    font-size: 1.2em;
  }
  
  .messages {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
  }
  
  .message {
    margin: 10px 0;
    display: flex;
    align-items: flex-start;
  }
  
  .user-message {
    justify-content: flex-end;
  }
  
  .bot-message {
    justify-content: flex-start;
  }
  
  .message-bubble {
    max-width: 70%;
    padding: 12px 16px;
    border-radius: 15px;
    margin: 5px 0;
    word-break: break-word;
  }
  
  .user-bubble {
    background: #3498db;
    color: white;
  }
  
  .bot-bubble {
    background: #ecf0f1;
    color: #2c3e50;
  }
  
  .timestamp {
    font-size: 0.8em;
    color: #95a5a6;
    margin-top: 4px;
  }
  
  .input-area {
    padding: 20px;
    border-top: 1px solid #eee;
    display: flex;
    gap: 10px;
  }
  
  .input-field {
    flex: 1;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 25px;
    outline: none;
  }
  
  .send-button {
    padding: 12px 25px;
    background: #3498db;
    color: white;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    transition: background 0.3s;
  }
  
  .send-button:hover {
    background: #2980b9;
  }
  </style>